﻿<template>
    <div class="container" style="width:99%;margin-top:-25px;">
	<!-- 查询条件 -->
    <div class="query-box">
        <el-form :model="queryBox" status-icon ref="queryBox">
          <el-row>
            <el-col :span="4">
               <el-form-item label="" prop="customerNumber">
                <el-input v-model="queryBox.customerNumber" placeholder="客户编号">
                    <template slot="prepend">客户编号</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
               <el-form-item label="" prop="seatNumber">
                <el-input v-model="queryBox.seatNumber" placeholder="请输入坐席号">
                    <template slot="prepend">坐席号</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
               <el-form-item label="" prop="tqNumber">
                <el-input v-model="queryBox.tqNumber" placeholder="请输入TQ号">
                    <template slot="prepend">TQ号</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <div class="depart-box">
                  <div class="slect-title">是否接通</div>
                  <el-select clearable v-model="queryBox.connectStatus" filterable>
                      <el-option
                          v-for="item in isGetThrough_options"
                          :key="item.lable"
                          :label="item.value"
                          :value="item.key">
                      </el-option>
                  </el-select>
                </div>
            </el-col>
            <el-col :span="4">
               <el-form-item label="" prop="callPeople">
                <el-input v-model="queryBox.callPeople" placeholder="请输入外呼人员">
                    <template slot="prepend">外呼人员</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
             <el-col :span='7'>
               <div class="depart-box">
                  <div class="slect-title">外呼时间</div>
                   <el-date-picker
                      v-model="callDate"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :default-time="['00:00:00', '23:59:59']" 
                      value-format="yyyy-MM-dd HH:mm:ss" 
                      format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </div>
            </el-col>
          </el-row>
        </el-form>
        <div class="from-btns">
            <kt-button :label="$t('action.reset')" perms="true" type="primary" @click="reset('queryBox')"/>
            <kt-button :label="$t('action.search')" perms="true" type="primary" @click="search"/>
        </div>
    </div>
	<!--表格内容栏-->
	<Crm-table  :showBatchDelete='false'  class="table-width" Outgoingrecordstu width="400" permsEdit="sys:user:edit" permsDelete="sys:user:delete"
		:data="pageResult" :columns="columns" :loading='loading'
		@findPage="findPage">
	</Crm-table >
  </div>
</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import distributionPop from "@/components/distributionPop";
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";
import CrmSwitch from "@/views/Core/CrmSwitch";
import CustomerOwnership from "@/components/CustomerOwnership";
import { CodeToText } from "element-china-area-data";
import axios from "axios";
export default {
  name: "Xuecoo",
  components: {
    CrmTable,
    KtButton,
  },
  data() {
    return {
      size: "small",
      // filters: {
      //   name: ""
      // },
      callDate:'',
      showBatchDelete:false,
      // 查询条件
      queryBox: {
        customerNumber:'',
        seatNumber:'',
        tqCode:'',
        connectStatus:'',
        callPeople:'',
      },
      isGetThrough_options:[
        {
          key:'1',
          value:'接通'
        },
         {
          key:'2',
          value:'未接通'
        }
      ],
      width: 200,
      columns: [
        {type: "index", label: "序号", minWidth: 200 },
        { prop: "customerNumber", label: "客户编号", minWidth: 150 },
        { prop: "agentName", label: "意向客户", minWidth: 80 },
        { prop: "customerSource", label: "客户来源", minWidth: 120 },
        { prop: "customerType", label: "客户类型", minWidth: 120 },
        { prop: "customerProgress", label: "客户进展", minWidth: 120 },
        { prop: "contacts", label: "联系人", minWidth: 100 },
        { prop: "diqu", label: "地区", minWidth: 190 },
        { prop: "callDate", label: "外呼时间", minWidth: 190 },
        { prop: "connect", label: "是否接通", minWidth: 100 },
        { prop: "callDuration", label: "通话时间（秒）", minWidth: 120 },
        { prop: "seatNumber", label: "坐席号", minWidth: 120 },
        { prop: "tqNumber", label: "TQ号", minWidth: 120 },
        { prop: "callPeopleStr", label: "外呼人员", minWidth: 120 }
      ],
      pageRequest: { pageNum: 1, pageSize: 8 },
      pageResult: {
        content: []
      },
      student_progress_options:[],
      student_type_options:[],
      student_data_from_options:[],
      loading:false
    };
  },
  methods: {
    // 重置
    reset(queryBox){      
      this.$refs.queryBox.resetFields();   
      this.queryBox.connectStatus=''
      this.queryBox.connectStatus=''
      this.queryBox.callStartDate=''
      this.queryBox.callStopDate=''
      this.callDate=[]
      this.pageRequest.pageNum = "1";
      this.findPage(null)
    },
    // 查询
    search(){
      this.loading=true
      this.queryBox.callStartDate=this.callDate[0]
      this.queryBox.callStopDate=this.callDate[1]
      this.pageRequest.pageNum = 1;
      this.findPage(null)
    },
    // 获取分页数据
    findPage(data) {
    if (data !== null) {
      this.loading=true
      this.pageRequest = data.pageRequest;
    }
    this.queryBox.pageSize = this.pageRequest.pageSize;
    this.queryBox.pageNum = this.pageRequest.pageNum;
    this.$api.agent
      .callStudyKooList(this.queryBox)
      .then(res => {
        let content = {'content':res.investmentCallInfoVo,'totalSize':res.total};
          this.pageResult=content;
        // this.pageResult.content = res.studentCallDetailList;
        this.pageResult.content.forEach(item => {
          item.connect=item.connectStatus=='1'?'接通':'未接通'
         if(item.province==null&&item.city==null||item.province=='null'&&item.city=='null'){
            item.diqu=""
          }else{
                item.diqu = CodeToText[item.province] + CodeToText[item.city]+ CodeToText[item.area];
          }
        })
        this.loading=false
      })
      .then(data != null ? data.callback : "");
    },
     // 获取来源
    get_student_data_from() {
      this.$api.user
        .optionsList({ codeType: "student_data_from" })
        .then(res => {
          this.student_data_from_options = res.keyValueList;
        });
    },
    get_student_progress() {
      this.$api.user.optionsList({ codeType: "student_progress" }).then(res => {
        this.student_progress_options = res.keyValueList;
      });
    },
      get_student_type() {
      this.$api.user.optionsList({ codeType: "student_type" }).then(res => {
        this.student_type_options = res.keyValueList;
      });
    }
  },
  mounted() {
    this.get_student_type()
    this.get_student_progress()
    this.get_student_data_from()
  }
};
</script>
<style >
@import url("../../assets/queryBox.css");
</style>


